import React, { Component } from 'react';
import { Icon, Row, Col,Card, Tooltip, Divider, Timeline } from 'antd';
import DescriptionList from 'components/DescriptionList';
import styles from './TestRecordDetail.less';
import TimelineItem from 'antd/lib/timeline/TimelineItem';
const { Description } = DescriptionList;


export default class RecordInfo extends Component {
  testRecordInfo = testRecord => {
    if (!testRecord) {
      return null
    } else {
      return (
        <div style ={{width:'100%'}}>
          <Row style={{ marginBottom: 24 }}>
            <Col span = {1}>新功能:</Col>
            <Col span = {7}>
              <p style={{whiteSpace:'pre-wrap',marginLeft:5}}>{testRecord.newFeatureRemark}</p>
            </Col>
            <Col span = {1}>修改点:</Col>
            <Col span = {7}>
              <p style={{whiteSpace:'pre-wrap',marginLeft:5}}>{testRecord.updateRemark}</p>
            </Col>
            <Col span = {1}>建议 :</Col>
            <Col span = {7}>
              <p style={{whiteSpace:'pre-wrap',marginLeft:5}}>{testRecord.adviseRemark}</p>
            </Col>
          </Row>
          <Divider style={{ margin: '16px 0' }} />
          <Row style={{ marginBottom: 24 }}>
            <Col span = {3}>提测包（地址）:</Col>
            <Col span = {21}> 
              <p style={{whiteSpace:'pre',marginLeft:5}}>{testRecord.testPackageUrl}</p>
            </Col>
          </Row>
        </div>
        )
    }

  }

  selfTestInfo = (version, testRecord) => {
    if (!version) {
      return null;
    } else {
      return (<DescriptionList style={{ marginBottom: 24 }} title="自测信息">
        <Description
          term={
            <span>
              自测用例版本
          <Tooltip title="跳转到testlink对应测试用例地址">
                <Icon
                  style={{ color: 'rgba(0, 0, 0, 0.43)', marginLeft: 4 }}
                  type="info-circle-o"
                />
              </Tooltip>
            </span>
          }
        >
          <a href={`${version ? version.selfTestCaseUrl : ''}`}>{version ? version.name : ''}</a>
        </Description>
        <Description term="自测结果">
          <span className={styles.passing}>{version ? 'Pass' : ''}</span>
        </Description>
        <Description>&nbsp;</Description>
        <Description term="自测用例提供">{version ? `${version.providerRealname}(${version.providerUserName})` : ''}</Description>
        <Description term="自测用例执行">{testRecord ? `${testRecord.createRealName}(${testRecord.createUserName})` : ''}</Description>
      </DescriptionList>)
    }
  }

  recordLog = (recordLog) => {
    if (!recordLog || !_.isArray(recordLog) || recordLog.length === 0) {
      return null;
    } else {
      let logDIV = recordLog.map(rl => {
        if(recordLog){
          if(rl.testBackReason){
            return(
              <TimelineItem key={rl.id}> 
               {rl.operatorRoleName} {rl.operatorRealName}({rl.operatorUserName}) 在 {rl.recordLogCreateTime} {rl.recordLogContent} （<font  color='#ff0000'>备注：{`${rl.testBackReason}`}</font>）
              </TimelineItem>
            )
          }else{
            return(
              <TimelineItem key={rl.id}> 
               {rl.operatorRoleName} {rl.operatorRealName}({rl.operatorUserName}) 在 {rl.recordLogCreateTime} {rl.recordLogContent}
              </TimelineItem>
            )
          }
        }else{
          return(
            <TimelineItem key={rl.id}> 
            </TimelineItem>
          ) 
        }
        // return (<TimelineItem key={rl.id}> 
        //             {recordLog ? `${rl.operatorRoleName} ${rl.operatorRealName}(${rl.operatorUserName}) 在 ${rl.recordLogCreateTime} ${rl.recordLogContent} `: ''}
        //         </TimelineItem>)
      });
      return logDIV;
    }
  }

  render() {

    const {version, testRecord} = this.props;
    const recordLog = testRecord ? testRecord.recordLog : [];

    return (<div>
      <Card title="提测信息" style={{ marginBottom: 24 }} bordered={true}>
        {this.testRecordInfo(testRecord)}
        <Divider style={{ margin: '16px 0' }} />
        {this.selfTestInfo(version, testRecord)}
      </Card>
      <Card title="操作日志" bordered={true}>
        <Timeline className={styles.timeline} style={{paddingTop:10}}>
            {this.recordLog(recordLog)}
        </Timeline>
      </Card>
    </div>
    );
  }
}
